// 电表设备
import { Device } from "@/api/interface/iot";
import img1 from "@/assets/images/iot/device/2.png";
import img3 from "@/assets/images/iot/device/3.png";
import img4 from "@/assets/images/iot/device/4.png";
import img5 from "@/assets/images/iot/device/5.png";
import { DataChart } from "@/components/Chart/interface";
import { ColumnProps } from "@/components/ProTable/interface";
import { ElDatePicker, ElImage } from "element-plus";
import { dayjs } from "element-plus";
import electricity from "@/assets/images/iot/snapshot/3.png";
import "./index.scss";
const Electricity = defineComponent({
	name: "Electricity", // 动态引入需要
	label: "电表", // 动态引入需要
	image: electricity, // 动态引入需要
	props: {
		detail: {
			type: Object as PropType<Device.ResDeviceInfo>,
			default() {
				return {};
			}
		}
	},
	setup(props) {
		const data = reactive({
			columns: [
				{ label: "头像", prop: "image", width: "90px", search: { slot: {} } },
				{ label: "姓名", prop: "name" },
				{ label: "时间", prop: "lastLiveTime", sortable: true, width: 170 },
				{ label: "状态", prop: "status", search: { slot: {} } }
			] as ColumnProps[],
			initParam: {} as any,
			dateTraffic: [dayjs().subtract(7, "d"), dayjs()],
			dateHuman: [dayjs().subtract(7, "d"), dayjs()],
			details: {} as any
		});
		const humanChart = ref();

		onMounted(() => {
			init();
		});
		const init = async () => {
			let chartData: DataChart.DataList = { dataList: [] };
			chartData.dataList.push({
				time: dayjs().subtract(30, "d").format("YYYY-MM-DD"),
				value: 0,
				group: "用电量"
			});
			if (props.detail.sn) {
				const listRes: any = await getPageList({
					sn: props.detail.sn
				} as any);
				data.details.activePower = listRes.result.filter((el: any) => el.key == "activePower")[0]?.value;
				data.details.electricity = listRes.result.filter((el: any) => el.key == "electricity")[0]?.value;
			}
			echartBase(humanChart.value, chartData.dataList, "用电量");
		};
		return () => {
			return (
				<div class="flex flex-wrap electricity">
					<div class="access-item" style={"overflow: hidden;"}>
						<ElImage src={img1} class="h-full w-full" fit="scale-down" style="padding-top: 26%; height: calc(100% - 180px)" />
					</div>
					<div class="access-item">
						<div class="bg-white d-item">
							<div class="page-title justify-between flex flex-grow-0">设备状态</div>
							<div class="flex items-center" style="margin-top: 20px">
								<div class="flex items-center justify-center" style={"width: calc(50% - 130px)"}>
									<img src={img3} />
									<div class="b-value">
										<div>有功功率</div>
										<div class="value">{data.details.activePower}W</div>
									</div>
								</div>
								<div style="width: 260px;position: relative;">
									<img src={img5} />
									<div class="c-value">
										<div class="value">{data.details.electricity}</div>
										<span>KW</span>
										<div class="tl">总用电量</div>
									</div>
								</div>
								<div class="flex items-center justify-center" style={"width: calc(50% - 130px)"}>
									<img src={img4} />
									<div class="b-value">
										<div>日用电量</div>
										<div class="value">{data.details.electricity1 || "--"}KW</div>
									</div>
								</div>
							</div>
							<div class="bckColor">
								<div class="left"></div>
								<div class="right"></div>
							</div>
						</div>
						<div class="bg-white d-item">
							<div class="page-title justify-between flex">
								日用电趋势
								<div style="width: 240px" class="flex">
									<ElDatePicker type="daterange" v-model={data.dateHuman} />
								</div>
							</div>
							<div class="text-center f-title">
								总用电量：<span>{data.details.electricity2 || "--"}KW</span>
							</div>
							<div ref={humanChart} style="height: calc(100% - 70px)"></div>
							<div class="chartTitle">用电量</div>
							<div class="bckColor">
								<div class="left"></div>
								<div class="right"></div>
							</div>
						</div>
					</div>
				</div>
			);
		};
	}
});
export default Electricity;

import { getPageList } from "@/api/modules/iot/variable";
import { useEcharts } from "@/hooks/useEcharts";
import * as echarts from "echarts";
import { PropType } from "vue";
const echartBase = (chart: any, data: any, title: string) => {
	let myChart: echarts.ECharts;
	myChart = echarts.init(chart);
	const xAxisData = [] as any;
	const yAxisData = [] as any;
	if (data && data.length) {
		data.map((el: any) => {
			xAxisData.push(el.time);
			yAxisData.push(el.value);
		});
	}
	const param = {
		title: {
			show: false,
			text: "img-" + Date.now(),
			subtext: "", //`水位趋势（${queryFrom.timeRange[0]} ~ ${queryFrom.timeRange[1]}）`,
			top: "20",
			left: "50%",
			textAlign: "center"
		},
		color: ["#82E28D"],

		dataZoom: [
			{
				show: false,
				start: 0,
				end: 100
			},
			{
				type: "inside",
				start: 0,
				end: 100
			}
		],
		tooltip: {
			trigger: "axis"
		},
		xAxis: [
			{
				axisLine: { show: false, lineStyle: { color: "#333" } },
				axisLabel: { textStyle: { color: "#000000" } },
				axisTick: { show: false },
				data: xAxisData,
				type: "category",
				boundaryGap: false
			}
		],
		yAxis: [
			{
				type: "value",
				splitLine: { show: true, lineStyle: { color: "#ccc", type: "dashed" } },
				axisLine: { show: false, lineStyle: { color: "#333" } },
				axisTick: { show: false },
				axisLabel: { color: "#999999" }
			}
		],
		grid: {
			left: 20,
			right: 5,
			bottom: "5%",
			top: 30,
			containLabel: true
		},
		series: [
			{
				type: "line",
				smooth: true,
				name: title,
				// 折线图线条颜色
				lineStyle: {
					color: "#82E28D",
					width: 4
				},
				// showSymbol: false,
				//区域图-背景
				areaStyle: {
					color: "rgba(130, 226, 141, 0.4)"
				},
				//柱状图-柱子背景(饼图需要置空，否则无法区分)
				symbol: "none",
				data: yAxisData
			}
		]
	};
	useEcharts(myChart, param);
};
